<template>
  <div>
    <!-- 头部 -->
     <div class="top_tab">
      <div class="left">
        <!-- <img slot="left" src="../assets/index/sao.png"> -->
      </div>
      <span>资讯</span>
      <div class="right" @click="fenlei()">
        <img slot="right" src="../assets/index/caidan.png">
      </div>
    </div>
    <div style="height:1rem;"></div>
    <!-- 导航栏 --> 
    <yd-tab horizontal-scroll :callback="oncallback">
        <yd-tab-panel :label="item.category" :tabkey="item.id" v-for="(item,index) in categoryList" :key="index"></yd-tab-panel>
    </yd-tab>
    <div style="height:5px;"></div>
    <!-- 主体部分 -->
    <div class="imfmian">
       <yd-slider autoplay="3000">
        <yd-slider-item v-for="(item,index) in luenboList" :key="index"> 
                <img :src="item"> 
        </yd-slider-item> 
        </yd-slider>
    </div>
	<!-- 列表部分 -->
	<div class="imflist">
      <router-link :to='"/newlist?id="+item.id+"&category_id="+category_id'  v-for="(item,index) in listList" :key="index"> 
      <div class="imflistl">
        <div class="imflistimg">
          <img :src="item.cover" alt="">
        </div>
        <div class="imglistright">
          <div>{{item.title}}</div>
          <div><span>{{item.created_at}}</span><span></span></div>
        </div> 
      </div> 
      </router-link>   
	</div>

</div>
  
</template>

<script>
// 底部导航
import Vue from "vue";
import { TabBar, TabBarItem } from "vue-ydui/dist/lib.rem/tabbar";
Vue.component(TabBar.name, TabBar);
Vue.component(TabBarItem.name, TabBarItem);
import {Tab, TabPanel} from 'vue-ydui/dist/lib.rem/tab';
Vue.component(Tab.name, Tab);
Vue.component(TabPanel.name, TabPanel);
import {Slider, SliderItem} from 'vue-ydui/dist/lib.rem/slider';
Vue.component(Slider.name, Slider);
Vue.component(SliderItem.name, SliderItem);

export default {
  name: "information",
  data() {
    return {
      categoryList:[],
      luenboList:[],
      listList:[],
      category_id:''
    };
  },
  methods: {
    // newlist: function() {
    //   this.$router.push("/newlist");
    // },
    fenlei:function(){
      this.$router.push("/classify"); 
    },
    //资讯分类
    category:function(){
      let self = this;
      let url = "/api/new/category";
			self.httpPost(url,[],function(res) {
				if (res.code == 200) {   
          self.categoryList=res.data;
          self.luenbo(self.categoryList[0].id)
          self.list(self.categoryList[0].id)
          self.category_id = self.categoryList[0].id;
				}else{
					self.$message.error(res.msg);
				} 
      })
    },
    //点击资讯分类
    oncallback:function(l, k) {
      //查询新闻
       let item = this.categoryList[k].id;
       console.log("sssss", item); 
       this.luenboList=[];
       this.listList=[];
       this.luenbo(item);
       this.list(item);
       this.category_id = item;
       console.log(this.category_id)
    },
    //轮播图
     luenbo:function(uid){
      let self = this;
      let url = "/api/new/banner";
			self.httpPost(url,{category_id:uid},function(res) {
				if (res.code == 200) {   
          self.luenboList=res.data.banner
				}else{
					self.$message.error(res.msg);
				} 
      })
    },
    //列表
    list:function(uid){
      let self = this;
      let url = "/api/new/item";
			self.httpPost(url,{category_id:uid},function(res) {
				if (res.code == 200) {   
          self.listList=res.data
				}else{
					self.$message.error(res.msg);
				} 
      })
    }
   
  },
  created(){ 
    document.title = "资讯"; 
    this.category()
  }
};
</script>


<style scoped>
.tabbarWarp {
  width: 100%;
  border-top: 1px solid #cccccc;
  position: fixed;
  bottom: 0;
}
.cy_tabbar {
  font-size: 0.3rem;
}
.yd-tabbar-icon img {
  width: 0.5rem;
}
.top_tab {
  width: 100%;
  position: fixed;
  padding: 0.2rem 0.3rem;
  background: #e63f3f;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 9999;
}
.top_tab span {
  color: #fff;
  font-size: 0.3rem;
  margin-left: 0.45rem;

}
.top_tab img {
  width: 0.46rem;
}
.imfnavli {
  padding-top: 1rem;
}
.imfnav {
  height: 0.8rem;
  line-height: 0.8rem;
  font-size: 0.3rem;
  background: #fff;
  padding: 0 0.2rem;
  display: flex;
  justify-content: space-between;
}
.imfmianimg {
  width: 100%;
  height: 3.5rem;
  position: relative;
  z-index: 1;
}
.imfmianimg img {
  width: 100%;
  height: 100%;
}
.imfimgbot {
  width: 100%;
  height: 0.6rem;
  padding-left: 5%;
  line-height: 0.6rem;
  background-color: rgba(39, 40, 34, 0.5);
  color: #fff;
  font-size: 0.32rem;
  position: absolute;
  bottom: 0;
  z-index: 1;
}
.imflist {
  padding: 0.3rem 0;
  /* margin-bottom: 1rem; */
  background: #fff;
}
.imflistl {
  height: 1.8rem;
  background: #fff;
  margin-bottom: 0.3rem;
  display: flex;
}
.imflistl:last-child {
  margin-bottom: 0;
}
.imflistimg {
  width: 2.6rem;
  height: 100%;
  margin: 0 0.3rem;
}
.imflistimg img {
  width: 100%;
  height: 100%;
}
.imglistright {
  width: 55%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 0.3rem;
}
.imglistright span {
  color: #999;
  margin-right: 0.3rem;
}
.imflistl{
  margin-bottom: .2rem!important;
}
</style>
<style>
.imfmian .yd-slider{
  height: 3.5rem!important;
}
</style>
